<template>
	<view>
		<!-- TODO 我的 -->
		<view class="u-flex u-row-between u-p-36 bg" hover-class="active" hover-stay-time="150">
			<view class="u-flex">
				<view class="avatar">
					<u-image src="/static/extra/avatar.png" width="116" height="116" :fade="false" border-radius="10"></u-image>
				</view>
				<view class="info u-m-l-36 u-p-10 u-flex flex-column u-row-between">
					<view class="u-font-34 u-line-1 nickname">简单</view>
					<view class="u-font-24 u-tips-color">精品号：<text>123456</text></view>
				</view>
			</view>
			<view class="u-flex u-col-center">
				<u-image src="/static/images/qr_code.png" width="34" height="34" :fade="false" @click="qrShow = !qrShow"></u-image>
				<u-image class="u-m-l-34 u-m-b-10" src="/static/images/right.png" width="16" height="26" :fade="false"></u-image>
			</view>
		</view>
		<u-cell-group class="u-m-t-22">
			<u-cell-item title="我的朋友圈">
				<view slot="icon" class="u-m-r-20" style="width: 40rpx;">
					<u-image src="/static/images/circle.png" width="39" height="38" :fade="false"></u-image>
				</view>
			</u-cell-item>
			<u-cell-item title="联系我们">
				<view slot="icon" class="u-m-r-20" style="width: 40rpx;">
					<u-image src="/static/images/contact_us.png" width="38" height="38" :fade="false"></u-image>
				</view>
			</u-cell-item>
			<u-cell-item title="意见反馈">
				<view slot="icon" class="u-m-r-20" style="width: 40rpx;">
					<u-image src="/static/images/feedback.png" width="25" height="38" :fade="false"></u-image>
				</view>
			</u-cell-item>
			<u-cell-item title="我的收藏">
				<view slot="icon" class="u-m-r-20" style="width: 40rpx;">
					<u-image src="/static/images/collect.png" width="37" height="35" :fade="false"></u-image>
				</view>
			</u-cell-item>
			<u-cell-item title="个人设置">
				<view slot="icon" class="u-m-r-20" style="width: 40rpx;">
					<u-image src="/static/images/setting.png" width="37" height="35" :fade="false"></u-image>
				</view>
			</u-cell-item>
		</u-cell-group>
		<qr-code v-show="qrShow" :show.sync="qrShow"></qr-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qrShow: false,
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}
	.bg {
		background-color: $uni-bg-color;
	}
	.active {
		background-color: transparent !important;
	}
	.info {
		height: 116rpx;
	}
	.nickname {
		font-weight: bold;
		color: #333333;
		width: 200rpx;
	}
</style>
